/**
 * Created by Administrator on 2017/11/1.
 */
import React from 'react';
import css from './index.less';
import ImgRow from 'assets/img/row.png';
// import { Link } from 'react-router-dom';
// import { Icon } from 'antd';


export default class SingleFloor extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      openWord: false,

    };
  }

  enter() {
    const { ind } = this.props;
    this.props.setFloor(ind);
    this.props.his.push( `/inner/${ind}`);
  }


  componentDidMount() {

    this.refs.zh.addEventListener('touchmove', function(e) {
      console.log(123123);
      e.preventDefault();
      e.stopPropagation();
      removeEventListener('touchmove', function() {
        // alert(123);
        console.log(456456);
      }, false);
    }, false);



  }

  closeWord() {
    // console.log('this.props.openWord', this.props.openWord);
    // const { closeW = () => {} } = this.props;
    // closeW();
    this.setState({
      openWord: false,
    });
  }

  openWord() {

    this.setState({
      openWord: true,
    });
  }

  render() {
    // console('num', this.props.number);
    // console.log('this.props.item.x', this.props.item.x);
    const { type, ind } = this.props;
    const { x, y, ml, mt, yl, yt, header, title, marLeft, marTop, } = this.props.item;
    // console.log('this.props.match.params', this.props.match.params);
    // const { isLight } = this.props;

    const props = {
      className: css.palace,
      id: ind,
      style: {
        marginLeft: `${marLeft}rem`,
        marginTop: `${marTop}rem`,
        // position: 'absolute',
        // left: x,
        // top: `${y}rem`,
        // opacity: this.state.opa,
      }
    };
    const imgProps = {
      className: css.titleImg,
      style: {
        // left: yl,
        // top: yt,

      }
    };
    const headProps = {
      src: header,
      className: css.header,
      style: {

        // width: w,
        // height: h,
      }
    };
    const jianProps = {
      // src: isLight == 'true' ? imgDay : imgNight,
      src: ImgRow,
      className: type ? css.jiantou2 : css.jiantou1,
      style: {
        left: ml,
        top: mt,
      }
    };
    const yuanProps = {
      // src: isLight == 'true' ? imgDay : imgNight,
      className: css.dotWarp,
      style: {
        left: yl,
        top: yt,
      }
    };

    return (
      <div {...props}>

        <div className={css.title} >
          <div ref="zh" >
            { this.state.openWord &&
            <div {...imgProps} >
              <img src={title}/>
              <div onClick={this.closeWord.bind(this)}/>
              <span className={css.enter} onClick={this.enter.bind(this)} />
            </div> }
          </div>
          <img onClick={this.openWord.bind(this)} {...headProps}/>
          <img {...jianProps} />
        </div>

      </div>
    );
  }
}
